<template>
	<view class="forgotPassword">
		<view class="title">
			 忘记密码
		</view>
		<view class="form">
			<input class="uni-input fist" v-model="formPasword.email" placeholder="请输入邮箱" />
			<view class="enrollInput">
				<input class="uni-input " v-model="formPasword.emailcode" maxlength="6" placeholder="请输邮箱验证码" />
				<view class="sendCodeName" @click="sendCode" v-if="countDown==0">
					发送验证码
				</view>
				<view class="sendCodeName" @click="sendCode" v-else>
					{{countDown}} S
				</view>
			</view>
			<view class="passwordicos">
				<image src="@/static/image/login/eye.png" v-if="showEye" @click="isbindTop" class="eye" alt="" />
				<image src="@/static/image/login/eyeclose.png" v-if="!showEye" @click="isbindTop" class="eye" alt="" />
				<input class="uni-input " :type="showEye?'text':'password'  " v-model="formPasword.password"
					placeholder="请输入密码" />
			</view>
			<view class="passwordicos">
				<image src="@/static/image/login/eye.png" v-if="determineTheShowEye" @click="determineTop" class="eye"
					alt="" />
				<image src="@/static/image/login/eyeclose.png" v-if="!determineTheShowEye" @click="determineTop"
					class="eye" alt="" />
				<input class="uni-input " :type="determineTheShowEye?'text':'password'  "
					v-model="formPasword.determineThePassword" placeholder="请输入确定密码" />
			</view>
			<button type="primary" class="btn" @click="submit">提交</button>
		</view>
		<view class="noAccountNumber">有账号, <span class="ospan" @click="goLogin">去登陆</span> </view>
	</view>
</template>

<script>
	import {
		sendEmail,
		forgotPassword
	} from "@/api/login.js";
	import {
		regex
	} from '@/utils/routeInterception.js'
	export default {
		name: 'AppView3ForgotPassword',

		data() {
			return {
				determineTheShowEye: false,
				showEye: false,
				formPasword: {
					email: "",
					emailcode: "",
					password: "",
					determineThePassword: ""
				},
				regex: new regex(),
				countDown: 0
			};
		},

		onShow() {
		
		},

		methods: {
			determineTop() {
				this.determineTheShowEye = !this.determineTheShowEye
			},
			isbindTop() {

				this.showEye = !this.showEye
			},
			// 注册
			async submit() {
				console.log(await this.verifyTheAccount(), 1111)
				if (await this.verifyTheAccount()) {
					// delete this.formPasword.determineThePassword
					forgotPassword(this.formPasword).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "success",
								title: "修改成功"
							})
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 2000)

						}
					})

				}


			},
			verifyEmail() {
				if (this.regex.validEmail(this.formPasword.email) == false) {
					uni.showToast({
						icon: "error",
						title: "请输入正确邮箱",
					})
				}
				return this.regex.validEmail(this.formPasword.email)
			},
			verifyCode() {
				if (this.formPasword.emailcode.length < 6 || this.formPasword.emailcode == "") {
					uni.showToast({
						icon: "error",
						title: "请填写6位验证码",
					})
					return false
				} else {
					return true
				}
			},
			verifyPassword() {
				if (this.regex.validPwd(this.formPasword.password) == false) {
					uni.showToast({
						icon: "error",
						title: "最少包含一个大写，小写，数字 不少于6为数的密码",
					})
				}
				return this.regex.validPwd(this.formPasword.password)
			},
			determineTheInput() {
				if (this.formPasword.password != this.formPasword.determineThePassword) {
					uni.showToast({
						icon: "error",
						title: "两次密码不一致！",
					})
					return false
				} else {
					return true
				}
			},




			async verifyTheAccount() {
				if (!this.verifyEmail()) {
					uni.showToast({
						icon: "error",
						title: "邮箱格式不正确"
					})
					return fasle
				}
				if (!this.verifyCode()) {
					uni.showToast({
						icon: "error",
						title: "请输入6位验证码"
					})
					return fasle
				}
				if (!this.verifyPassword()) {
					uni.showToast({
						icon: "error",
						title: "最少包含一个大写，小写，数字 不少于6为数的密码"
					})
					return fasle
				}
				if (!this.determineTheInput()) {
					uni.showToast({
						icon: "error",
						title: "最少包含一个大写，小写，数字 不少于6为数的密码"
					})
					return fasle
				}
				return true
			},
			countDownFun() {
				let timer = null
				let countDown = 60
				timer = setInterval(() => {
					this.countDown = countDown
					if (this.countDown > 0) {
						countDown--
					} else {
						clearInterval(timer)
					}
				}, 1000)
			},
			sendCode() {
				if (this.verifyEmail()) {
					sendEmail({
						email: this.formPasword.email,
						businessEnum: "UPDATE_PASS"
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "success",
								title: "发送成功",
							})
							this.countDownFun()
						}
					})
				}

			},
			goLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		},
	};
</script>

<style lang="scss">
		@import "@/uni.scss";
	.forgotPassword {
     width: 750rpx;
	 margin: 0 auto;
     height: 100vh;
     // background: linear-gradient(150deg, #001f3f, #0088a9,  rgba(41, 46, 75, 1), #ebf5ee,rgba(24, 27, 44, 1));
   background: url("@/static/image/login/loginBgc.png");
	 overflow: hidden;
     .uni-input {
     	width: 80% ;
     	height: 80rpx;
     	border: 1px solid $app-input-border;
     	backdrop-filter: blur(0px);
     	margin: 0 auto;
     	padding: 0rpx 5%;
     	margin-top: 50rpx;
     	color: $app-text-black;
     	font-size: 30rpx;
     	font-weight:400;
     	border-radius: 4rpx;
     	background: $app-input-color;
     	border: 2rpx solid $app-input-border;
     	backdrop-filter: blur(0px);
     }
     

		.fist {
			margin-top: 100rpx;
		}

		.btn {
			width: 90%;
			height: 100rpx;
			border-radius: 8rpx;
			margin-top: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		background: $app-bgc-btn;
		color: $app-text-color;
			font-weight: bold;
			&:active{
				opacity: 0.5;
			}
		}

		.noAccountNumber {
			width: 90%;
			margin: 0 auto;
			font-size: 30rpx;
			text-align: center;
			color: $app-text-color-80;
			margin-top: 40rpx;
			          
			.ospan {
				color: $app-text-color;
			
			}
		}

		.enrollInput {
			position: relative;
		}

		.sendCodeName {
			width: 150rpx;
			height: 40rpx;
			color: $app-text-color;
			font-size: 25rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 60rpx;
			top: 20rpx;
			border-left: 2rpx solid $app-text-color;
		}

		.passwordicos {
			position: relative;

			.eye {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 80rpx;
				top: 23rpx;
				z-index: 9;
			}
		}
		.title{
			width: 90%;
			margin: 0 auto;
			opacity: 1;
			/** 文本1 */
			font-size: 70rpx;
			font-weight: 700;
			letter-spacing: 0rpx;
			line-height: 41.02rpx;
			color: $app-text-color;
			text-align: left;
			vertical-align: top;
			padding-bottom: 72rpx;
			padding-top: 200rpx;
		}
	}
</style>